<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Pause Example</title>
        <style type='text/css'>
          body {
            font-family: verdana
          }

          .tabs {
            padding: 0px;
            margin: 0px;
          }

          .tabs li {
            float: left;
            padding: 10px;
            background-color: #F6F6F6;
            list-style: none;
            margin-left: 10px;
          }

          .tabs li a {
            color: #1C94C4;
            font-weight: bold;
            text-decoration: none;
          }

          .tabs li.active a {
            color: #F6A828;
            cursor: default;
          }

          .tab {
            border: solid 2px #F6A828;
            width: 360px;
            height: 100px;
            padding: 20px;
          }

          .dirty {
            border: solid 2px red;
          }

            /* clearfix from jQueryUI */
          .ui-helper-clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
          }

          .ui-helper-clearfix {
            display: inline-block;
          }

            /* required comment for clearfix to work in Opera \*/
          * html .ui-helper-clearfix {
            height: 1%;
          }

          .ui-helper-clearfix {
            display: block;
          }

            /* end clearfix */
          #modal {
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            display: none;
          }

          #background {
            background-color: gray;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            opacity: 0.5;
          }

          #box {
            position: absolute;
            margin: -55px 0px 0px -105px;
            top: 50%;
            left: 50%;
            border: solid 1px gray;
            background-color: white;
            opacity: 1;
            width: 200px;
            height: 100px;
            padding: 10px;
          }

          span {
            color: Red;
          }

          label {
            display: block;
          }
        </style>
    </head>
    <body>
<div id="demo-html">
<ul id="tabs" class="ui-helper-clearfix">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="panels">
  <form id="tab1" class="tab">
		<label>Name:</label> <input name="name"/>
		<label>Age:</label> <select name="age"><option>10</option><option>20</option></select>
  </form>
  <form id="tab2" class="tab">
  	<label>Yard:</label> <select name="yard"><option>1</option><option>2</option></select>
		<label>Team:</label> <input name="team"/>
  </form>
  <form id="tab3" class="tab">
  	<label>Price:</label> <input name="price"/>
		<label>Comment:</label> <textarea name="comment"></textarea>
  </form>
</div>
</div>
<div id="modal">
	<div id="background"></div>
	<div id="box"><p>Do you wish to save?</p>
		 <a href="javascript://" id="yes">Yes</a>
		 <a href="javascript://" id="no">No</a>
		 <a href="javascript://" id="cancel">Cancel</a>
	</div>
</div>

<script type='text/javascript' src='../../node_modules/steal/steal.js' main='@empty'></script>
<script type='text/javascript' id="demo-source">
steal('jquerypp/event/pause','jquerypp/event/default',function(){

// create a widget listens for change and marks as dirty
$.fn.dirtybit = function(){
	this.each(function(){
		var element = $(this);
		element.data('formData', element.serialize());
		var check = function(){
			 if (element.serialize() == element.data('formData')) {
		      element.removeClass('dirty');
		    } else {
		      element.addClass('dirty');
		    }
		};
		
		element.bind("change keyup click", check)
			.bind("set", function(){
				element.data('formData', element.serialize())
        			.removeClass('dirty');
			});
	});
};

$.fn.tabs = function(){
	this.addClass("tabs")
	this.each(function(){
		var element = $(this);
		var el = element;
		var tab = function (li) {
		   return $(li.find("a").attr("href").match(/#.*/)[0]);
		};
		
		$(el).children("li:first").addClass('active');

	    element.children("li:gt(0)").each(function () {
	      tab($(this)).hide();
	    });
		el.on("click","li", function(ev){
			var el = $(this);
			ev.preventDefault();
		    var active = element.find('.active'),
		    	old = tab(active),
		        cur = tab(el);
		    old.triggerAsync('hide', function () {
		      active.removeClass('active')
		      old.slideUp(function () {
		        el.addClass('active')
		        cur.slideDown()
		      });
		    });
		});
	});
};

$.fn.modal = function(options){
	this.show();
	this.each(function(){
		var element = $(this);
		element.on("click","a", function(){
			var a = $(this);
			element.hide();
		    options[a.attr('id')]();
		
		    element.off("click","a", arguments.callee);
		});
	});
};

$.fn.saver = function(){
	this.each(function(){
		var el = $(this);
		el.bind("hide", function(ev){
			if (el.hasClass('dirty')) {
		      ev.pause();
		      $('#modal').modal({
		        yes : function () {
		          var save = $('<span>Saving</span>').appendTo(el);
		          $.post("/update", el.serialize(), function () {
		            save.remove();
		            el.trigger('set');
		            ev.resume();
		          });
		        },
		        no : function () {
		          ev.resume();
		        },
		        cancel : function () {
		          ev.preventDefault();
		          ev.resume();
		        }
		      });
		   };
		});
	});
};



$('#tabs').tabs();

$("#panels .tab").each(function() {
  $(this).dirtybit();
  $(this).saver();
});

// a fake post method
$.post = function (url, data, success) {
  setTimeout(success, 500);
};

});
</script>
    </body>
</html>